<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table渲染</title>
    <style type="text/css">
        #add, #del {
            font-size: 26px;
            margin: 15px;
        }

        #name, #year {
            margin: 10px;
        }

        .leftTable {
            width: 400px;
            height: 400px;
            background-color: #cccccc;
            float: left;
        }

        #rightInput {
            width: 400px;
            height: 400px;
            background-color:sienna ;
            float: right;
        }
        /*#username{*/
            /*height: 40px;*/
            /*width: 20px;*/

        /*}*/
        .RinputChange{
            height: 20px;
            width: 120px;

        }
        .Rinput{
            height: 300px;
            width: 200px;
        }

    </style>
</head>
<body>
<div class="leftTable">
    <input id="name" type="text" placeholder="请输入姓名">
    <label for="nan">请选择性别：</label>
    <input id="nan" type="radio" name="sex" class="sex" value="男" checked>男
    <input id="nv" type="radio" name="sex" class="sex" value="女">女

    <input id="year" type="text" placeholder="请输入年龄">
    <input id="add" type="button" value="新增" onclick="createRow()">
    <input id="del" type="button" value="删除" onclick="delRow()">
    <table id="editTable" border="1" width="400">
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tbody id="tbody">

        </tbody>


    </table>
</div>

<div id="rightInput">
    <input id="username" class="Rinput" onblur="changeColor()">

</div>

<script type="text/javascript">

    function changeColor(){
        var inputId=document.getElementById("username");
        inputId.className="RinputChange";

        LoginDao lo=new LoginDao();


    }


    function createRow() {                        //打好基础，注释增加
        var editTable = document.getElementById("tbody");//获取已存在的元素将来作为tr父类
        var tr = document.createElement("tr");           //添加tr元素
        var td0 = document.createElement("td");          //添加td元素
        var checkbox = document.createElement("input");  //添加input元素
        checkbox.type = "checkbox";                      //添加input元素的类型为checkbox
        checkbox.name = "checkRow";                      //添加input元素的类名为checkRow
        td0.appendChild(checkbox);                     //在td0中添加子元素checkRow
        var td1 = document.createElement("td");            //创建元素td1（td0表示新添加tr元素中的第一个td元素，以此类推）
        td1.innerHTML = document.getElementById("name").value;//td1的元素内容来源于id为name的标签的值
        var td2 = document.createElement("td");            //创建元素td2
        var a = "";                                       //声明变量a，并赋值为空，变量即将用于下文的for循环
        sex = document.getElementsByClassName("sex");     //定义类名为sex的所有元素列表为“sex”，
        for (var i = 0; i < sex.length; i++) {                   //性别验证
            if (sex[i].checked)  //判断sex[i]是否为checked的值         //name属性让机器识别到“男“”女”为同类单选框
                a = sex[i].value;   //如果满足条件，则输出sex[i]的值
            td2.innerHTML = a;       //将有checked属性的值赋给td2的元素内容，
        }
        var td3 = document.createElement("td");            //创建td3元素
        td3.innerHTML = document.getElementById("year").value;    //将id为year的值赋给td3的元素内容
        tr.appendChild(td0);                                    //将td0元素（子类）添加到tr元素中（父类）
        tr.appendChild(td1);                                    //将td1元素（子类）添加到tr元素中（父类）
        tr.appendChild(td2);                                    //将td2元素（子类）添加到tr元素中（父类）
        tr.appendChild(td3);                                    //将td3元素（子类）添加到tr元素中（父类）
        editTable.appendChild(tr);                              //将tr元素添加到已存在的元素tbody中
    }

    function delRow() {
        var editTable = document.getElementById("tbody");//获取tr的父类，即td的父类的父类
        if (confirm("确认删除所选?")) {//confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。语法：confirm(message)

            var checkboxs = document.getElementsByName("checkRow");//找到td的类名
            for (var i = 0; i < checkboxs.length; i++) {
                if (checkboxs[i].checked) {                      //检查td0元素复选框的值是否被选中
                    var n = checkboxs[i].parentNode.parentNode;//获取td类名的父类的父类，即tr的父类
                    editTable.removeChild(n);                //删除其tr父类的子节点（即tr）
                    i--;                                     //自减少1，每执行一次减少一个tr元素
                }
            }

        }
    }

</script>
</body>
</html>